import React from 'react'
// 引入地图插件
import { TMap, InfoWindow } from '@map-component/react-tmap'

const Info = () => {
  //获取房间的ID
  let [searchParams] = React.Router.useSearchParams()
  let [rid, SetID] = React.useState(searchParams.get('rid') ? searchParams.get('rid') : 0)
  // 房间信息
  let [room, SetRoom] = React.useState({
    name: '',
    price: '',
    state: '',
    thumb_text: '',
    flag_text: [],
    content: '',
    total: 0,
  })
  //部分的评论列表
  let [comment, SetComment] = React.useState([
    {
      id: '1',
      avatar:
        'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
      name: 'Novalee Spicer',
      description: 'Deserunt dolor ea eaque eos',
    },
    {
      id: '2',
      avatar:
        'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
      name: 'Sara Koivisto',
      description: 'Animi eius expedita, explicabo',
    },
    {
      id: '3',
      avatar:
        'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
      name: 'Marco Gregg',
      description: 'Ab animi cumque eveniet ex harum nam odio omnis',
    },
    {
      id: '4',
      avatar:
        'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
      name: 'Edith Koenig',
      description: 'Commodi earum exercitationem id numquam vitae',
    },
  ])

  // 钩子函数
  React.useEffect(() => {
    RoomData()
  }, [])

  // 房间信息
  const RoomData = async () => {
    var result = await React.HTTP.post('/room/info', { rid })

    if (result.code == 0) {
      React.error(result.msg, () => { })
      return false
    }

    SetRoom(result.data)
  }

  // 确认订单
  const confirm = async () => {
    if (Object.getOwnPropertyNames(React.Business).length <= 0) {
      React.error('请先登录', () => { })
      return false
    } else {
      React.navigate(`/room/confirm?rid=${rid}`)
    }
  }

  return (
    <>
      <link rel='stylesheet' href='/assets/css/detail.css' />

      {room.thumb_text ? <React.UI.Image src={room.thumb_text} width={'100%'} fit="fill" /> : ""}

      <div className='detail_top'>
        <div id="intro" className="intro">
          <div className="title">{room.name}</div>
          <div className="betwee">
            <div className="left">
              {room.flag_text && room.flag_text.map((flag: any, index: any) => <span key={index}>{flag}</span>)}
            </div>
            <div className="right">分享</div>
          </div>
          <div className="title">{room.content}</div>
        </div>

        <div className="notesin">
          <div className="title">预订须知</div>
          <div className="item">
            <span className="tips">预订房型：</span>
            <span>{room.name}</span>
          </div>
          <div className="item">
            <span className="tips">入离时间：</span>
            <span>当天 12:00 后入住，次日 12:00 前退房</span>
          </div>
          <div className="item">
            <span className="tips">剩余房间数量：</span>
            <span>{room.total}</span>
          </div>
        </div>

        <div className="comment map">
          <div className="title">地图路线</div>
          <TMap
            mapKey="ZPMBZ-BWI3M-PP56L-66XNR-E7JYV-44B72"
            version='1.exp'
            center={{ lat: 39.984104, lng: 116.307503 }}
          />
        </div>

        <div id="comment" className="comment">
          <div className="title">{room.name}的评价</div>

          <React.UI.List className="list">
            {comment.map(item => (
              <React.UI.List.Item
                key={item.name}
                prefix={
                  <React.UI.Image
                    src={item.avatar}
                    style={{ borderRadius: 20 }}
                    fit='cover'
                    width={40}
                    height={40}
                  />
                }
                description={item.description}
              >
                {item.name}
              </React.UI.List.Item>
            ))}
          </React.UI.List>

          <React.UI.AutoCenter className='more'>
            <React.Router.Link to={'/room/comment'}>查看更多评价</React.Router.Link>
          </React.UI.AutoCenter>
        </div>
      </div>

      <div className="foot-bar">
        <div className="price">￥{room.price}</div>
        <React.UI.Button onClick={confirm} color='primary' disabled={room.state ? false : true}>立即预定</React.UI.Button>
      </div>

    </>
  )
}

export default Info
